<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        .box {

            width: 700px;
            height: 50px;
            margin: 100px auto 0;
            background-color: #ccc;

        }
        ul li {
            float: left;
            height: 50px;
            padding: 0 20px;
            line-height: 50px;
            text-align: center;
        }
        .current {
            background-color: red;
            color: #fff;
        }

        .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
        .clearfix{
           *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

        }
        .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c">
         <ul class="tab_list clearfix">
             <li class="current">商品介绍</li>
             <li>规格与包装</li>
             <li>售后保障</li>
             <li>商品评价（50000)</li>
             <li>手机社区</li>
         </ul>
         </div>
         <div class="content">
              <div class="item" style="display: block;">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
              <div class="item">4</div>
              <div class="item">5</div>
         </div>
    </div>
    <script>
   var lis = document.querySelector('.tab_list').querySelectorAll('li')
   var items = document.querySelectorAll('.item')
         for(var i=0;i<lis.length;i++){
             lis[i].setAttribute('index',i);
             lis[i].onclick = function(){
                 for(var i=0;i<lis.length;i++){
                     lis[i].className = '';
                 }
                 this.className = 'current';
                 
                  var index =   this.getAttribute('index');
                for(var i=0;i<items.length;i++){
                    items[i].style.display = 'none'
                }
                  items[index].style.display = 'block'
             }
             
         }
    </script>

</body>
</html>